<!--
 * @Descripttion: 
 * @version: 
 * @Author: weihua.yao
 * @Date: 2021-04-14 23:13:04
 * @LastEditTime: 2021-04-14 23:47:40
-->
<!-- 引入 js 库
编写渲染容器 DOM
准备渲染数据
获取渲染 DOM 对象
初始化 G2 绘图对象（如：G2Plot.Line），配置绘图参数
调用 render 完成渲染 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script> 
</head>
<body>
  <div id="g2-chart">
  </div>
  <script>
     const { Line } = G2Plot;
     const data = [
        { year: '1991', value: 3 },
        { year: '1992', value: 4 },
        { year: '1993', value: 3.5 },
        { year: '1994', value: 5 },
        { year: '1995', value: 4.9 },
        { year: '1996', value: 6 },
        { year: '1997', value: 7 },
        { year: '1998', value: 9 },
        { year: '1999', value: 13 },
      ];
    const chartDom = document.getElementById("g2-chart");
    const line = new Line(chartDom, {
        title: {
          visible: true,
          text: 'g2折线图示例',
        },
        data,
        xField: 'year',
        yField: 'value',
        description: {
          visible: true,
          text: '折线图用于表示连续时间跨度内的数据，它通常用于显示某变量随时间的变化模式。',
        },
        point: {
          visible: true
        },
        label: {
          visible: true
        },
        color: '#FE740C', //线条颜色
        point: { //点的样式
          visible: true,
          size: 5, // 点的宽度
          color: 'white',
          style: {
            stroke: '#FE740C', //填充
            lineWidth: 2, //线条宽度
            fillOpacity: 0.6, // 透明度
          },
        },
        yAxis: {
          formatter: (v) => {
            return v + 'k';
          },
        },
      });
    line.render()
  </script>
</body>
</html>